<script setup lang="ts">
import { getArticlesAPI } from '@/api/article';
import type { ArticleItem } from '@/types';
import { ref, watch } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';

const props = defineProps<{
  activeId: number
}>()
const router = useRouter()

const list = ref<ArticleItem[]>([]) // 文章列表数据
const getArictles = async () => {
  const result = await getArticlesAPI({ channel_id: props.activeId, timestamp: Date.now().toString() })
  list.value = result.results
}
watch(() => props.activeId, (newId) => {
  // 获取最新的数据
  getArictles()
}, {
  immediate: true
})


</script>

<template>
  <div class="article-list">
    <div @click="router.push(`/detail/${item.art_id}`)" class="article-item" v-for="item in list" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <template v-if="item.cover.type === 3">
        <img v-for="img in item.cover.images" class="img" :src="img" alt="">
      </template>
      <template v-else-if="item.cover.type === 1">
        <img class="img" :src="item.cover.images?.[0]" alt="">
      </template>
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ dayjs(item.pubdate).fromNow() }}</span>
      </div>
    </div>
  </div>
</template>